import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_credit_card/flutter_credit_card.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:moose_app/ui/values/values.dart';
import 'package:moose_app/ui/widgets/pagination/custom_pagination.dart';
import 'package:moose_app/ui/widgets/scroll/scroller_configuration_wrapper.dart';

class ATHVipCenterBody extends StatefulWidget {
  @override
  _ATHVipCenterBodyState createState() => _ATHVipCenterBodyState();
}

class _ATHVipCenterBodyState extends State<ATHVipCenterBody> {
  bool _showBackView = false;

  @override
  Widget build(BuildContext context) {
    return ATHScrollerConfigurationWrapper(
      child: SingleChildScrollView(
        child: Column(
          children: [
            _buildCreditCard(),
            _buildRightsAndInterests(),
            _buildVipAdSwiper(),
            _buildSetMeal(),
          ],
        ),
      ),
    );
  }

  /// 套餐信息
  Widget _buildSetMeal() {
    return Container(
      margin: EdgeInsets.all(kSize20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: kSize16),
            child: Text(
              "套餐推荐",
              style: TextStyle(fontSize: kFontSize32),
            ),
          ),
          Container(
            child: StaggeredGridView.countBuilder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 6,
                crossAxisCount: 4,
                crossAxisSpacing: kSize20,
                staggeredTileBuilder: (index) {
                  return StaggeredTile.fit(2);
                },
                itemBuilder: (context, index) {
                  return ATHSetMealItem(
                    imageUrl:
                        'https://gitee.com/shizidada/moose-resource/raw/master/moose/banner/1.jpg',
                  );
                }),
          ),
        ],
      ),
    );
  }

  /// 权益广告信息
  Widget _buildVipAdSwiper() {
    return Container(
      height: kSize140,
      margin: EdgeInsets.symmetric(horizontal: kSize20).copyWith(top: kSize20),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(kSize20)),
        child: Swiper(
          itemCount: 3,
          itemBuilder: (BuildContext context, int position) {
            return CachedNetworkImage(
              imageUrl:
                  "https://gitee.com/shizidada/moose-resource/raw/master/moose/banner/5.jpg",
              fit: BoxFit.fitWidth,
            );
          },
          pagination: SwiperPagination(
              margin: EdgeInsets.only(top: kSize20),
              alignment: Alignment.bottomCenter,
              builder:
                  CustomSwiperPaginationBuilder(activeColor: kColorPrimary)),
        ),
      ),
    );
  }

  /// 权益信息
  Widget _buildRightsAndInterests() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: kSize20),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: kSize16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "当前等级权益",
                  style: TextStyle(fontSize: kFontSize32),
                ),
                Text(
                  "查看全部",
                  style: TextStyle(
                    color: kColor99,
                    fontSize: kFontSize24,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: kSize20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ATHRightsInterestsItem(),
                ATHRightsInterestsItem(),
                ATHRightsInterestsItem(),
              ],
            ),
          )
        ],
      ),
    );
  }

  /// 会员卡信息
  Widget _buildCreditCard() {
    return GestureDetector(
      onTap: () {
        setState(() {
          _showBackView = !_showBackView;
        });
      },
      child: CreditCardWidget(
        height: kSize360,
        cardNumber: '1266 9636 8899 9999',
        expiryDate: '03/13',
        showBackView: _showBackView,
        cardBgColor: kColor2A2936,
        cvvCode: '456987',
        cardHolderName: 'M O O S E A P P',
        cardType: CardType.visa,
      ),
    );
  }
}

class ATHSetMealItem extends StatelessWidget {
  final String imageUrl;

  ATHSetMealItem({@required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Column(
//      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
            height: kSize300,
            width: (MediaQuery.of(context).size.width / 2),
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(kSize20)),
              child: CachedNetworkImage(
                imageUrl: imageUrl,
                fit: BoxFit.fitWidth,
              ),
            )),
        Container(
          padding: EdgeInsets.symmetric(vertical: kSize16),
          alignment: Alignment.bottomLeft,
          child: Text(
            '有故事的人儿',
            style: TextStyle(fontSize: kFontSize28, color: kColor33),
          ),
        )
      ],
    );
  }
}

class ATHRightsInterestsItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SvgPicture.asset(
          "assets/icons/vip/icon_coupon.svg",
          width: kSize58,
          color: kColor33,
        ),
        Container(
            margin: EdgeInsets.only(top: kSize8),
            child: Text(
              "服务优惠特权",
              style: TextStyle(fontSize: kFontSize28, color: kColor33),
            ))
      ],
    );
  }
}
